import React, { Component, ComponentProps, ReactComponentElement } from 'react'
import { List, InputItem, Button } from 'antd-mobile';
import { connect } from 'react-redux'
import { createForm } from 'rc-form';
import './Login.less'
import Icon from '@/components/font'
import { getChkSvg, login } from '@/api/common'
import { Toast } from 'antd-mobile';

interface LoginForm {
  captcha: string,
}

class LoginForm extends Component{
  constructor(props:any) {
    super(props);
    this.state = {captcha: ''};
  }
  async getCheckSvg() {
    const res = await getChkSvg({});
    console.log(this.props);
    this.setState({captcha: res});
  }
  async loginHandle() {
    const { getFieldsValue } = (this.props as any).form;
    const { saveCtx, history } = this.props as any
    const params = getFieldsValue();
    if (!params.username) {
      return Toast.info('请先输入用户名');
    };
    if (!params.password) {
      return Toast.info('请先输入密码');
    };
    // if (!params.checkcode) {
    //   return Toast.info('请先输入校验码');
    // };
    const res:any = await login(params)
    console.log(res);
    if(res.code !== 0) {
      return Toast.info(res.message);
    }
    // 成功之后保存token和usercontext
    saveCtx(res.data)
    // 跳转聊天首页
    Toast.info('登录成功！');
    history.push('/')
    setTimeout(() => {
      window.location.reload();
    }, 100);
  }
  componentDidMount() {
    // this.getCheckSvg();
  }
  render() {
    const { getFieldProps, getValueProps } = (this.props as any).form;
    const { captcha } = this.state as any;
    return (
      <div className="login-wrapper">
        <div className="login-head"></div>
        <div className="poem">
          <p>前端的未来是星辰大海</p>
          <p>小伙你头发甚密，不做前端可惜了</p>
        </div>
        <List>
          {/* <InputItem
            {...getFieldProps('email')}
            placeholder="请输入邮箱"
          >
            <Icon type="icon-mail-fill"></Icon> 
          </InputItem>
          <div style={{textAlign: 'right', padding: '10px'}}>
            <Button type="primary" size="small" inline>获取验证码</Button>
          </div>
          <InputItem
            {...getFieldProps('input2')}
            placeholder="请输入邮箱验证码"
          >
            <Icon type="icon-safety-certificate"></Icon>
          </InputItem> */}
          <InputItem
            {...getFieldProps('username')}
            placeholder="请输入昵称"
          >
            <Icon type="icon-user-fill"></Icon>
          </InputItem>
          <InputItem
            {...getFieldProps('password')}
            placeholder="请输入密码"
            type="password"
          >
            <Icon type="icon-key"></Icon>
          </InputItem>
          {/* <div class="code-wrapper">
            <InputItem
              {...getFieldProps('checkcode')}
              placeholder="验证码"
            >
              <Icon type="icon-supervise"></Icon>
            </InputItem>
            <p className="codebox" dangerouslySetInnerHTML={{__html: captcha}}></p>
          </div> */}
        </List>
        <div style={{padding: '20px 15px'}}>
          <Button type="primary" onClick={this.loginHandle.bind(this)}>登录</Button>
        </div>
        <p style={{padding: '15px', color: '#999'}}>tips: 您无需注册，第一次登录即视为注册</p>
      </div>
    )
  }
}

export default connect((state)=>{
  return {}
}, (dispatch) => {
  return {
    saveCtx(ctx:any) {
      dispatch({type: 'UPDATE_appContext', payload: ctx})
    }
  }
})(createForm()(LoginForm));
